<template>
    <div>
        <a-control-group>
            <a-label>尝试输入“面包”</a-label>
            <a-input-search
                v-model:value="cate"
                :searchFunc="getItemsFunc"
                :getTextFunc="(a) => a.name"
                :getValueFunc="(a) => a.id"
            />
        </a-control-group>
        <pre class="language-html"><code>{{ `<a-control-group>
    <a-label>尝试输入“面包”</a-label>
    <a-input-search
        v-model:value="cate"
        :searchFunc="getItemsFunc"
        :getTextFunc="(a) => a.name"
        :getValueFunc="(a) => a.id"
    />
</a-control-group>` }}</code></pre>
        <pre class="language-javascript"><code>{{ `export default {
    data() {
        return {
            cateItems: [
                { id: 1, parentId: null, name: '面包蛋糕' },
                { id: 2, parentId: null, name: '麻辣食品', disabled: true },
                { id: 3, parentId: null, name: '膨化食品' },

                { id: 4, parentId: 1, name: '面包' },
                { id: 5, parentId: 1, name: '蛋糕' },
                { id: 6, parentId: 1, name: '三明' },

                { id: 7, parentId: 2, name: '豆干' },
                { id: 8, parentId: 2, name: '辣条' },
                { id: 9, parentId: 2, name: '凤爪' },

                { id: 10, parentId: 4, name: '面包商品1' },
                { id: 11, parentId: 4, name: '面包商品2' },
                { id: 12, parentId: 4, name: '面包商品3', disabled: true },
            ],
            cate: null,
        }
    },
    methods: {
        getItemsFunc(displayText) {
            if (!displayText) {
                return []
            }
            return this.cateItems.filter(a => a.name.includes(displayText))
        }
    }
}` }}</code></pre>
        <div v-for="type in typeList" :key="type.name" class="c-m-t-m">
            <p>{{ type.name }}</p>
            <a-table
                :headerList="type.headerList"
                :dataList="type.dataList"
            ></a-table>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            cateItems: [
                { id: 1, parentId: null, name: '面包蛋糕' },
                { id: 2, parentId: null, name: '麻辣食品', disabled: true },
                { id: 3, parentId: null, name: '膨化食品' },

                { id: 4, parentId: 1, name: '面包' },
                { id: 5, parentId: 1, name: '蛋糕' },
                { id: 6, parentId: 1, name: '三明' },

                { id: 7, parentId: 2, name: '豆干' },
                { id: 8, parentId: 2, name: '辣条' },
                { id: 9, parentId: 2, name: '凤爪' },

                { id: 10, parentId: 4, name: '面包商品1' },
                { id: 11, parentId: 4, name: '面包商品2' },
                { id: 12, parentId: 4, name: '面包商品3', disabled: true },
            ],
            cate: null,
            typeList: [
                {
                    name: 'props',
                    headerList: [
                        { name: 'name', text: '名称' },
                        { name: 'remark', text: '说明' },
                        { name: 'type', text: '类型' },
                        { name: 'default', text: '默认值' },
                    ],
                    dataList: [
                        { name: 'color', remark: '主题色', type: 'default | primary | secondary | success | warning | error', default: 'default' },
                        { name: 'disabled', remark: '是否禁用', type: 'boolean', default: 'false' },
                        { name: 'size', remark: '尺寸', type: 'xs | s | m | l | xl', default: 'm' },
                        { name: 'sharp', remark: '是否尖角', type: 'boolean', default: 'false' },
                        { name: 'rules', remark: '表单验证规则', type: 'Array<{name: required | func, value: boolean | Function | any, errorMessage: string}>', default: '[]' },
                        { name: 'value', remark: '值', type: 'any', default: 'null' },
                        { name: 'searchFunc', remark: '搜索出待选项的方法', type: 'Function', default: 'async (displayText) => []' },
                        { name: 'delay', remark: '值', type: 'number', default: '0' },
                        { name: 'getTextFunc', remark: '获取文字的方法', type: 'Function', default: 'a => a.text' },
                        { name: 'getValueFunc', remark: '获取值的方法', type: 'Function', default: 'a => a.value' },
                        { name: 'getDisabledFunc', remark: '获取待选项是否被禁用的方法', type: 'Function', default: 'a => a.disabled' },
                        { name: 'popPlacement', remark: '下拉框弹出的位置', type: 'top | top-start | top-end | right | right-start | right-end | bottom | bottom-start | bottom-end | left | left-start | left-end', default: 'bottom' },
                        { name: 'clearable', remark: '是否可清空', type: 'boolean', default: 'true' },
                        { name: 'maxHeight', remark: '下拉框最高高度，如果下拉框高度超过此高度，将会显示滚动条', type: 'number', default: 'null' },
                        { name: 'placeholder', remark: '占位文字', type: 'string', default: 'null' },
                        { name: 'attachButtonShown', remark: '是否显示额外按钮', type: 'boolean', default: 'true' },
                    ],
                },
                {
                    name: 'emits',
                    headerList: [
                        { name: 'name', text: '名称' },
                        { name: 'remark', text: '说明' },
                        { name: 'params', text: '参数' },
                    ],
                    dataList: [
                        { name: 'update:value', remark: '值发生变化', params: 'any' },
                        { name: 'validate', remark: '输入验证', params: '[boolean, string]' },
                        { name: 'focus', remark: '获得焦点', params: 'null' },
                        { name: 'clear', remark: '失去焦点', params: 'null' },
                        { name: 'itemClick', remark: '选项被点击', params: 'any' },
                    ],
                }
            ]
        }
    },
    methods: {
        getItemsFunc(displayText) {
            if (!displayText) {
                return []
            }
            return this.cateItems.filter(a => a.name.includes(displayText))
        }
    }
}
</script>